<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@page import="java.security.interfaces.RSAPrivateKey"%>
<%@page import="java.util.HashMap"%>
<%@page import="util.RSAUtil"%>
<%@page import="java.security.interfaces.RSAPublicKey"%>
<%@page import="java.util.Map"%>
<%@page import="java.security.Key"%>

<%
	Map<String, Key> keyMap = RSAUtil.initKey();
	//公钥信息保存在页面，用于加密
	String publicKey = RSAUtil.getPublicKey(keyMap);
	String privateKey = RSAUtil.getPrivateKey(keyMap);
	System.out.println("公钥:" + publicKey);
	System.out.println("私钥" + privateKey);
	session.setAttribute("privateKey", privateKey);//私钥保存在session中，用于解密
%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>主页</title>
<!--Core CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet">
<link href="css/toastr.min.css" rel="stylesheet">
<link href="css/toastr.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/my.js"></script>
<script type="text/javascript">  
            //检查验证码是否正确  
            function check_number(){  
                var xhr = getXhr();  
                var code = $V('code');  
                xhr.open('get','checkNumber?code='+code,true);  
                xhr.onreadystatechange = function(){  
                    if(xhr.readyState==4){  
                        if(xhr.status==200){  
                            //服务器访问正常  
                            var txt = xhr.responseText;  
                            $('code_msg').innerHTML = txt;  
                        }else{  
                            $('code_msg').innerHTML = '验证出错';  
                        }  
                    }  
                };  
                $('code_msg').innerHTML = '正在验证';  
                xhr.send(null);  
            }  
        </script>

<style type="text/css">
@import
	url(http://fonts.googleapis.com/css?family=Raleway:300,400,600,700,800,900 

);

/* Reset
=====================================================================*/
* {
	padding: 0;
	margin: 0;
}

body {
	background: #ffffff;
	font-family: 'Raleway', sans-serif;
	overflow-x: hidden;
	text-rendering: optimizelegibility;
}

a {
	color: #ffffff;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
	text-decoration: none;
}

a:focus {
	color: #ffffff;
	outline: medium none;
	outline-offset: 0;
}

/* Headings */
h1 {
	font-size: 2em;
	font-weight: normal;
	line-height: 1.15;
}

h2 {
	font-size: 1.5em;
	line-height: 1.25;
	margin-bottom: .45em;
}

h3 {
	font-size: 1.35em;
	line-height: 1.25;
	margin-bottom: .45em;
}

h4 {
	font-size: 1.05em;
	line-height: 1.35;
	margin-bottom: .45em;
}

h5 {
	font-size: 1.05em;
	line-height: 1.35;
	margin-bottom: .45em;
}

h6 {
	font-size: 1em;
	line-height: 1.35;
	margin-bottom: 1em;
}

/* Forms */
form {
	display: inline;
}

fieldset {
	border: 0;
}

legend {
	display: none;
}

/* Table */
table {
	border: 0; /*border-collapse:collapse;*/
	border-spacing: 0;
	empty-cells: show;
	font-size: 100%;
}

caption, th, td {
	vertical-align: top;
	text-align: left;
	font-weight: normal;
}

/* Content */
p {
	margin: 0 0 1em;
}

strong {
	font-weight: bold;
}

address {
	font-style: normal;
	line-height: 1.35;
}

cite {
	font-style: normal;
}

q, blockquote {
	quotes: none;
}

q:before, q:after {
	content: '';
}

small {
	font-size: 1em;
}

big {
	font-size: 1.15em;
}
/*sup           { font-size:1em; vertical-align:top; }*/

/* Lists */
ul, ol {
	list-style: none;
}

.copyrights {
	text-indent: -9999px;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
/* Show Messages
=====================================================================*/
.gen {
	background: none repeat scroll 0 0 #fff;
	color: #008900;
	font-size: 20px;
	margin: 15px auto;
	padding: 5px;
	text-align: center;
}

.err {
	background: none repeat scroll 0 0 #FF0000;
	color: #008900;
	font-size: 20px;
	margin: 15px auto;
	padding: 5px;
	text-align: center;
}

/* Section Title
=====================================================================*/
.section-title {
	margin-bottom: 35px;
	margin-top: 80px;
	text-align: center;
}

.section-title h2 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
	padding: 0 0 15px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
}

.section-title h2:before {
	border: 2px solid #59a3fc;
	bottom: 0;
	content: "";
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	width: 100px;
}

.section-title p {
	color: #9c9c9c;
	font-size: 16px;
	font-style: italic;
	text-align: center;
}

/* Site Header Part
=====================================================================*/
.overlay {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
	height: 100%;
	width: 100%;
}

.site_logo {
	margin-top: 50px;
	text-align: center;
}

.menu_area {
	background: url("images/menu_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
	bottom: 0;
	height: 50px;
	position: absolute;
	width: 100%;
}

.stick_menu {
	position: fixed;
	top: 0;
	z-index: 9999;
}

.header_part {
	background: url("images/background.jpg") repeat scroll center center/cover
		rgba(0, 0, 0, 0);
	overflow: hidden;
}

.navbar-default {
	background-color: transparent;
	border-color: transparent;
}

.logo {
	
}

.active {
	background: url("images/active-bg.png") repeat scroll 0 0
		rgba(0, 0, 0, 0) !important;
	color: #fff !important;
}

.logo a {
	color: #ffffff !important;
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover,
	.navbar-default .navbar-nav>li>a:focus {
	color: #fff;
}

.site_title {
	
}

.site_title h1 {
	color: #fff;
	font-size: 50px;
	font-weight: 700;
	margin: 30px auto;
	text-align: center;
}

.site_title p {
	color: #fff;
	font-size: 18px;
	text-align: center;
}

/* Site Countdown Part
=====================================================================*/
.countdown {
	color: #fff;
	margin: 40px auto 10px;
	width: 70%;
}

.countdown_row {
	display: block;
	margin-left: 5px;
	overflow: hidden;
	width: 100%;
}

.countdown_section {
	background: none repeat scroll 0 0 transparent;
	border: 2px solid #ddd;
	border-radius: 100%;
	display: block;
	float: left;
	font-size: 25px;
	margin: 15px 30px auto;
	padding: 30px 12px;
	text-align: center;
	width: 140px;
}

.countdown_amount {
	font-size: 25px;
	font-weight: 800;
}

/* About Section
=====================================================================*/
.welcome_section {
	overflow: hidden;
}

.about {
	margin: 0 auto;
	padding: 60px 20px;
}

.about h2 {
	font-size: 35px;
	font-weight: bold;
	text-align: center;
}

.about p {
	margin: 20px;
	text-align: center;
}

.welcome_part {
	margin: 50px auto 80px;
}

.welcome_icon {
	background: none repeat scroll 0 0 transparent;
	border: 2px solid #59a3fc;
	border-radius: 100%;
	color: #59a3fc;
	margin: 0 auto;
	padding: 35px;
	text-align: center;
	width: 140px;
}

.welcome_part h2 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 5px;
	text-transform: uppercase;
	text-align: center;
}

.welcome_part p {
	color: #9c9c9c;
	font-size: 14px;
	text-align: center;
}

/* Email Subscribe Section
=====================================================================*/
.email_subscribe_section {
	background: none repeat scroll 0 0 #ecf0f1;
	color: #000;
	height: auto;
	overflow: hidden;
	width: 100%;
}

.email_subscriber_head {
	margin: 100px auto 30px;
}

.email_subscriber_head h2 {
	font-size: 35px;
	text-align: center;
}

.email_subscriber_head p {
	text-align: center;
}

.email_subscribe_form_part {
	margin-bottom: 80px;
	text-align: center;
}

.email_input_box {
	background: none repeat scroll 0 0 #fff;
	border-radius: 30px;
	color: #000;
	display: inline;
	font-size: 15px;
	height: auto;
	margin: 20px 30px;
	padding: 15px;
	width: 40%;
}

.email_submit_box {
	border-radius: 30px;
	margin-top: -5px;
	padding: 15px 40px;
}

.email_submit_box:focus, .email_submit_box:active:focus,
	.email_submit_box.active:focus {
	outline: medium none;
	outline-offset: -2px;
}

/* Contact Section
=====================================================================*/
.contact_section {
	overflow: hidden;
	background: none repeat scroll 0 0 #18191a;
	color: #fff;
}

.contact_head {
	padding: 80px 0 30px;
	text-align: center;
}

.contact_head h2 {
	font-size: 35px;
	font-weight: bold;
}

.contact_head p {
	
}

.address_part {
	
}

.address {
	margin: 10px auto;
	font-weight: 600;
}

.phone {
	margin: 10px auto;
	font-weight: 600;
}

.email {
	margin: 10px auto;
	font-weight: 600;
}

.social_icons {
	
}

.social_icons ul {
	
}

.social_icons ul li {
	display: inline;
	font-size: 20px;
	margin-right: 10px;
}

.social_icons ul li a {
	font-size: 40px;
}

.contact_form {
	margin-bottom: 60px;
}

.contact_input_box {
	background: none repeat scroll 0 0 transparent;
	border: 1px solid #666;
	border-radius: 30px;
	color: #fff;
	height: auto;
	margin-bottom: 30px;
	padding: 15px;
	resize: none;
}

.contact_button {
	border-radius: 30px;
	font-size: 18px;
	height: auto;
	padding: 10px 25px;
}

.contact_button:focus, .contact_button:active:focus, .contact_button.active:focus
	{
	outline: medium none;
	outline-offset: -2px;
}
</style>

</head>
<body>
	<!-- Header Section Start -->
	<header id="header_part">
		<div class="header_part" id="head">
			<div class="overlay">
				<div class="start_part">
					<div class="container">
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<div class="row">
									<!-- Logo Start -->
									<div class="site_logo">
										<a href="#" title=""><img src="images/logo.png" alt=""
											title="" /></a>
									</div>
									<!-- Logo End-->
									<!-- Site Title start-->
									<div class="site_title">
										<h1>交通执法，与您同在</h1>
										<p>天网恢恢疏而不漏，正义永远不会缺席，缉查布控系统，助您一臂之力！</p>

									</div>
								</div>
							</div>
						</div>
						<!-- Menu Start -->
						<div class="menu_area" id="stick_menu">
							<div class="container">
								<div class="row">
									<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
										<nav class="navbar navbar-default" role="navigation">
											<div class="container-fluid">
												<div class="collapse navbar-collapse mainnavmenu"
													id="bs-example-navbar-collapse-1">
													<div id="menu-center">
														<ul class="nav navbar-nav navbar-right mainnav">
															<li><a href="#header_part">开始</a></li>
															<li><a href="#welcome_section">欢迎</a></li>
															<li><a href="#contact_section">登录</a></li>
														</ul>
													</div>
												</div>
											</div>
										</nav>
									</div>
								</div>
							</div>
						</div>
						<!-- Menu End-->
					</div>
				</div>
	</header>
	<!-- Header Section End -->
	<!-- About Section Start -->
	<section id="welcome_section">
		<div class="welcome_section">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						<div class="row">
							<!-- About text start -->
							<div class="section-title">
								<h2>欢迎来到车辆缉查布控系统</h2>
								<p>这是我们系统的功能</p>
							</div>
							<!-- About text end -->
						</div>
						<!-- About service part start-->
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
								<div class="welcome_part wow fadeInLeft">
									<div class="welcome_icon">
										<i class="fa fa-file-image-o fa-4x"></i>
									</div>
									<h2>卡口设备模块</h2>
									<p>通过交通卡口实现对过车数据的采集，包括车辆号牌号码、车辆类型、颜色、速度、方向、车道、图片、设备编号、采集时间等；基于采集的过车数据，实现相应的交通业务功能，包括过车查询、车辆轨迹回放、道路车流量统计、嫌疑车辆筛查等。</p>
								</div>
							</div>
							<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
								<div class="welcome_part wow fadeInUp">
									<div class="welcome_icon">
										<i class="fa fa-life-ring fa-4x"></i>
									</div>
									<h2>黑名单系统</h2>
									<p>通过选择卡口点对具体某一号牌车辆进行布控，系统会根据卡口上传的车辆信息与黑名单车辆进行比对；当该车辆通过布控的卡口点，系统会进行实时报警，并可以进行报警处理等相应业务。</p>
								</div>
							</div>
							<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
								<div class="welcome_part wow fadeInDown">
									<div class="welcome_icon">
										<i class="fa fa-briefcase fa-4x"></i>
									</div>
									<h2>套牌车管理系统</h2>
									<p>通过对套牌车辆的维护、审核，系统可以把套牌车作为布控车辆。并分析出套牌车的运行轨迹。</p>
								</div>
							</div>
							<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
								<div class="welcome_part wow fadeInRight">
									<div class="welcome_icon">
										<i class="fa fa-trophy fa-4x"></i>
									</div>
									<h2>资源管理</h2>
									<p>通过对套牌车辆的维护、审核，系统可以把套牌车作为布控车辆。并分析出套牌车的运行轨迹。</p>
								</div>
							</div>
						</div>
						<!-- About service part end-->
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- Contact Section Start -->
	<section id="contact_section">
		<div class="contact_section">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						<div class="row">
							<div class="section-title">
								<h2>登录</h2>
								<p>快来登录成为系统的主人，开始便利的工作吧！</p>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
								<div class="address_part">
									<div class="address">
										<i class="fa fa-map-marker"></i> 上园村3号 <br /> 北京交通大学 <br />
										软件学院 <br /> AVG18第九小组
									</div>
									<div class="phone">
										<i class="fa fa-phone"></i> +86 181 429 32 777
									</div>
									<div class="email">
										<i class="fa fa-envelope-o"></i> 15301111@bjtu.edu.cn
									</div>
									<div class="social_icons">
										<ul>
										</ul>

									</div>
								</div>
							</div>
							<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
								<div class="contact_form">
									<div id="show_contact_msg"></div>
									<!-- Contact Form Start -->
									<form name="form" id="contact_form">

										<input type="text" id="name" name="name"
											class="form-control contact_input_box wow fadeInUp"
											placeholder="用户名" /> <input type="password" id="password"
											name="password"
											class="form-control contact_input_box wow fadeInUp"
											placeholder="密码" />

										<div style="widht: 500px">
											<div style="float: left; width: 250px">
												<input type="text" id="checkcode" name="checkcode"
													class="form-control contact_input_box wow fadeInUp"
													placeholder="验证码" />
											</div>


											<div style="float: right; width: 250px">
												<img id="code" src="${pageContext.request.contextPath}/code"
													onclick="this.src='${pageContext.request.contextPath}/code?'+(new Date()).getTime()"><br />
											</div>
										</div>

										<input type="text" style="visibility: hidden;" name="我是用来占位置的" />
										<input type="text" style="visibility: hidden;" name="我是用来占位置的" />

										<div style="widht: 500px">


											<button type="button"
												class="btn btn-primary contact_button wow fadeInUp"
												onclick="check_login()">
												<i class="fa fa-send-o"></i> 登录
											</button>




											<button class="btn btn-primary contact_button wow fadeInUp">
												<a href="toRegister"><i class="fa fa-send-o"></i> 注册</a>
											</button>
											<a href="去哪" type="button" class="button">忘记密码</a>

										</div>



									</form>
									<!-- Contact Form End -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- Contact Section End -->
	<!--Core js-->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/toastr.min.js"></script>
	<script src="js/jquery.smooth-scroll.js"></script>
	<script src="js/wow.min.js"></script>
	<script src="js/jquery.nicescroll.min.js"></script>
	<script src="js/jquery.countdown.min.js"></script>
	<!--common script init for all pages-->
	<script src="js/script.js"></script>
	<script type="text/javascript" src="js/jsencrypt.min.js"></script>
	<script src="js/layer.js"></script>
	<script>
		toastr.options = {
			closeButton : true,
			debug : false,
			progressBar : false,
			positionClass : "toast-top-full-width",
			onclick : null,
			showDuration : "100",
			hideDuration : "100",
			timeOut : "1000",
			extendedTimeOut : "100",
			showEasing : "swing",
			hideEasing : "linear",
			showMethod : "fadeIn",
			hideMethod : "fadeOut"
		};
		// 验证输入不为空的脚本代码
		function check_login() {
			if (form.name.value == "") {
				var $toast = toastr['error']('用户名不能为空', '错误');
				form.username.focus();
				return false;
			}
			if (form.password.value == "") {
				var $toast = toastr['error']('密码不能为空', '错误');
				form.password.focus();
				return false;
			}
			if (form.checkcode.value == "") {
				var $toast = toastr['error']('验证码不能为空', '错误');
				form.password.focus();
				return false;
			}
			if (form.password.value.length < 6) {
				var $toast = toastr['error']('密码长度不能能少于6位', '错误');
				form.password.focus();
				return false;
			}
			var index = layer.load(1, {
				  shade: [0.1,'#fff'] //0.1透明度的白色背景
				});
			var name = document.getElementById("name");
			var password = $("#password");
			var checkcode = document.getElementById("checkcode");
			var encrypt = new JSEncrypt();
			encrypt.setPublicKey("<%=publicKey%>");
			var enpassword = encrypt.encrypt(password.val());
			$.ajax({
				url : "login",
				type : "post",
				data : {
					username : name.value,
					password : enpassword,
					checkcode : checkcode.value
				},
				success : function onSuccess(data) {
					if (data.result == true) {
						location.href = "toIndex";
					} else {
						toastr.options = {
							closeButton : true,
							debug : false,
							progressBar : false,
							positionClass : "toast-top-full-width",
							onclick : null,
							showDuration : "100",
							hideDuration : "100",
							timeOut : "1000",
							extendedTimeOut : "100",
							showEasing : "swing",
							hideEasing : "linear",
							showMethod : "fadeIn",
							hideMethod : "fadeOut"
						};

						var $toast = toastr['error']('密码或验证码错误错误', '错误');
						form.password.focus();
					}
				}
			});
		}
	</script>
</body>
</html>